
{{template "header" .}}
		
<script type="text/javascript">
function formatDate(timestamp) {
    if (timestamp == 0){
        return "";
    }
    var now = new Date(timestamp*1000);
    var year=now.getFullYear();
    var month=now.getMonth()+1;
    var date=now.getDate();
    var hour=now.getHours();
    var minute=now.getMinutes();
    var second=now.getSeconds();
    return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
}
</script>
                <div class="ibox float-e-margins" >
                  <div class="row">
                  <div class="col-lg-8"></div>
                        <div class="col-lg-4"></div>

                    </div>

                    <div class="row">

                        <div class="col-lg-12">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h5>UserList</h5>
                                    <div class="ibox-tools">
                                        <a class="collapse-link">
                                            <i class="fa fa-chevron-up"></i>
                                        </a>
                                        <a class="close-link">
                                            <i class="fa fa-times"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="ibox-content">
                                    <div class="table-responsive">
                                        <table class="table table-striped">
                                            <thead>
                                                <tr>
                                                    <th>Name</th>
                                                    <th>Group</th>
                                                    <th>AddTime</th>
                                                    <th>UpdateTime</th>
                                                    <th>OP</th>
                                                </tr>
                                            </thead>
                                            <tbody id="dbListContair">
                                            	{{range $i, $v := .UserList}}
                                                <tr>
                                                    <td>{{$v.Name}}</td>
                                                    <td>{{$v.Group}}</td>
                                                    <td><script type="text/javascript">document.write(formatDate({{$v.AddTime}}));</script></td>
                                                    <td><script type="text/javascript">document.write(formatDate({{$v.UpdateTime}}));</script></td>

                                                    <td>
                                                        <button data-toggle="button" class="btn-sm btn-primary updateUserBtn" type="button">修改</button>

                                                        <button data-toggle="button" class="btn-sm btn-danger DelUserBtn" type="button">Del</button>
                                                    </td>
                                                </tr>
                                                {{end}}
                                            </tbody>
                                        </table>
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            
            
            
            <div class="ibox float-e-margins" id="addAdminContair">
            <div class="ibox-title">
                <h5 id="opContairTitle">Add new User</h5>
                <div class="ibox-tools">
                
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <a name="newOrUpdateUser"></a><!--新增或者修改数据源-->
            <div class="ibox-content">
                <div class="row row-lg">

                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Name：</label>
                            <div class="col-sm-9">
                                <input type="text" name="user_name" id="user_name" class="form-control" placeholder="Name"> <span class="help-block m-b-none">* 字母,30个字母以内</span>
                            </div>
                        </div>
                        <div class="form-group" >
                            <label class="col-sm-3 control-label">Password：</label>
                            <div class="col-sm-9" style=" position: relative">
                                <input type="password" name="user_password" id="user_password" class="form-control" placeholder="password"> <span class="help-block m-b-none">*</span>
                            </div>
                        </div>

                        <div class="form-group" >
                            <label class="col-sm-3 control-label">再次输入Password：</label>
                            <div class="col-sm-9" style=" position: relative">
                                <input type="password" name="user_password2" id="user_password2" class="form-control" placeholder="password"> <span class="help-block m-b-none">*</span>
                            </div>
                        </div>

                        <div class="form-group"  id="update_toserver_contair">
                            <label class="col-sm-3 control-label">Group：</label>
                            <div class="col-sm-9">
                                <select class="form-control" name="user_group" id="user_group">
                                    <option value="administrator">administrator</option>
                                    <option value="monitor">monitor</option>
                                </select><span class="help-block m-b-none"></span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">&nbsp;</label>
                            <div class="col-sm-9">
                                <button data-toggle="button" class="btn-sm btn-primary" id="addNewUserBtn" type="button">提交</button>
                    
                            </div>
                        </div>                        
                        
                    </div>
                </div>
            </div>
        </div>
        
{{template "footer" .}}

<script type="text/javascript">

$("#addNewUserBtn").click(
	function(){
		var user_name = $("#user_name").val();
		if(user_name=="" || user_name.length > 30){
			 $("#user_name").focus();
			 return false;
		}
		var user_password = $("#user_password").val();
        var user_password2 = $("#user_password2").val();
		var user_group = $("#user_group").val();
		if( user_password == "" || user_password2 == "" || user_group=="" ){
			return
		}
		if( user_password != user_password2 ){
            alert("二次输入密码不匹配，请重新输入！");
            return;
        }

		var url = "/user/update";
		$.post(
			url,
			{ user_name: user_name,password:user_password,group:user_group},
			function(data,status){
				if( status != 'success' ){
					alert("reqeust error, reqeust status : "+status);
					return false;
				}
				if(!data.status){
					alert(data.msg);
					return false;
				}
				alert(data.msg);
				window.location.reload();
                return;
			},
			'json'
		);
	}
);

function updateOpContairTitle(Name) {
    if( Name == "" ) {
        $("#opContairTitle").text("Add new User");
    }else{
        $("#opContairTitle").text("Update User : "+Name);
    }
}

$(".updateUserBtn").click(
    function () {
        var trObj = $(this).parent().parent();
        var user_name =  trObj.children().eq(0).text();
        var user_group =  trObj.children().eq(1).text();

        updateOpContairTitle(user_name);

        $("#user_name").attr("disabled","disabled");
        $("#user_name").val(user_name);
        $("#user_group").val(user_group);
        $("#update_toserver_contair").show();
    }
);

$(".DelUserBtn").click(
        function () {
            var trObj = $(this).parent().parent();
            var user_name =  trObj.children().eq(0).text();
            if(!confirm("确定删除用户 "+user_name+ " ? 删除后不能恢复")){
                return false;
            }
            var url = "/user/del";
            $.post(
                    url,
                    { user_name: user_name},
                    function(data,status){
                        if( status != 'success' ){
                            alert("reqeust error, reqeust status : "+status);
                            return false;
                        }
                        if(!data.status){
                            alert(data.msg);
                            return false;
                        }
                        trObj.remove();
                        return;
                    },
                    'json'
            );
        }
);


</script>
